<template>
  <div class="first">
    <div class="top">
      <div class="top1" ref="a"></div>
      <div class="top2">
        <div class="item" v-for="(item, index) in fileList" :key="index">
          <div><img :src="item.img" alt=""></div>
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="top3">
        <h3>#框架Vue3.x版本变更说明</h3>
        <div class="item" v-for="(item, index) in vueList" :key="index">
          <div> <span>{{ item.id }}</span> <span>{{ item.text }}</span></div>
        </div>
      </div>
    </div>
    <div class="conter">
      <div class="conter1">
        <ul>
          <li v-for="(item, index) in minList" :key="index">
            <div><img :src="item.img" alt=""><span>{{ item.title }}</span></div>
            <div>{{ item.text }}</div>
          </li>
        </ul>
      </div>
      <div class="conter2" ref="b"></div>
      <div class="conter3" ref="c">
      </div>
    </div>
    <div class="bottom">
      <div ref="d"></div>
      <div ref="e"></div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from "vue";
// 基于准备好的dom，初始化echarts实例
// 饼状图变量
let a = ref(null)
// 竖状图变量
let b = ref(null)
// 球状图
let c = ref(null)
// 堆叠条图形
let d = ref(null)
// 竖状图变量
let e = ref(null)
// 指定a图表的配置项和数据
let myaChart = null
// 指定b图表的配置项和数据
let mybChart = null
// 指定c图表的配置项和数据
let mycChart = null
// 指定d图表的配置项和数据
let mydChart = null
// 指定e图表的配置项和数据
let myeChart = null
// 饼创图
let initChart = () => {
  myaChart = echarts.init(a.value);
  myaChart.setOption({
    title: {
      // 标题文本
      text: '框架集成及开发环境',
      top: '2%',
      left: 'center',
      // 主标题文本样式
      textStyle: {
        color: 'black',
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      icon: 'circle',
      top: '83%',
      itemGap: 0,
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },

        data: [
          { value: 1048, name: '.NetCore' },
          { value: 735, name: 'Dapper' },
          { value: 735, name: 'EntityFramework' },
          { value: 735, name: 'Redis' },
          { value: 735, name: 'Vue3.0' },
          { value: 580, name: 'Vuex' },
          { value: 484, name: 'Element plus' },
        ]
      }
    ]
  })
}
// 竖状图
let bChart = () => {
  mybChart = echarts.init(b.value);
  mybChart.setOption({
    title: {
      text: '这里是首页'
    },
    dataset: {
      source: [
        ["type", "2015", "2016", "2017", "2018", "2019", '2020', '2021'],
        ["2.0下载量", 730, 620, 420, 932, 701, 834, 890],
        ["3.0下载量", 230, 210, 120, 132, 101, 134, 90]
      ]
    },
    legend: {},
    xAxis: {
      type: "category",
      axisTick: {
        show: false
      }
    },
    yAxis: {},
    series: [
      {
        type: "bar",
        seriesLayoutBy: "row",
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        type: "bar",
        seriesLayoutBy: "row",
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
}
// 球状图
let cChart = () => {
  mycChart = echarts.init(c.value);
  mycChart.setOption({
    title: {
      text: '框架支持功能(Vue2.0、Vue3.0版本)',
      left: 'center',
      top: 10
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
      bottom: '5%',
      left: 'center',
      data: ['多租户', '多角色', '多数据库', '主从分库', '国际化', 'App/H5开发', 'Redis', 'Sqlserver', 'Mysql', 'oracle']
    },
    series: [
      {
        type: 'pie',
        radius: '40%',
        center: ['50%', '45%'],
        selectedMode: 'single',
        data: [
          { value: 748, name: '多租户', },
          { value: 435, name: '多角色' },
          { value: 580, name: '多数据库' },
          { value: 280, name: '主从分库' },
          { value: 284, name: '国际化' },
          { value: 300, name: 'App/H5开发' },
          { value: 200, name: 'Redis' },
          { value: 600, name: 'Sqlserver' },
          { value: 400, name: 'Mysql' },
          { value: 100, name: 'oracle' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]

  })
}
// 堆叠条图
let dChart = () => {
  mydChart = echarts.init(d.value);
  mydChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: 'Mail Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Affiliate Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  })
}
let eChart = () => {
  myeChart = echarts.init(e.value);
  myeChart.setOption({
    title: {
      text: '这里是首页'
    },
    dataset: {
      source: [
        ["type", "2015", "2016", "2017", "2018", "2019", '2020', '2021'],
        ["2.0下载量", 730, 620, 420, 932, 701, 834, 890],
        ["3.0下载量", 230, 210, 120, 132, 101, 134, 90]
      ]
    },
    legend: {},
    xAxis: {
      type: "category",
      axisTick: {
        show: false
      }
    },
    yAxis: {},
    series: [
      {
        type: "bar",
        seriesLayoutBy: "row",
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        type: "bar",
        seriesLayoutBy: "row",
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
}
onMounted(() => {
  initChart()
  bChart()
  cChart()
  dChart()
  eChart()
})

let fileList = [
  { img: '/image/执行器安装调试记录.png', name: 'GitHub' },
  { img: '/image/工业组件-开关.png', name: 'Gitee' },
  { img: '/image/书本.png', name: '框架Vue2版本' },
  { img: '/image/24gl-fileText.png', name: '框架文档' },
  { img: '/image/对话.png', name: '大屏数据' },
  { img: '/image/对话 (1).png', name: 'QQ群45221949' },
]
let vueList = [
  { id: 1, text: '框架2.x版本不支持直接升级Vue3版本(代码生成器已修改)' },
  { id: 2, text: '框架使用的Element Plus组件，移除了Iview组件的依赖' },
  { id: 3, text: '框架内部组件全部重新优化,相比2.x版本首屏大小减少60%' },
  { id: 4, text: '框架Vue2版本会继续维护,并与Vue3版本同步更新,请放心使用' },
  { id: 5, text: '框架Vue2、Vue3版本开发文档一致(差异部分文档会备注说明)' },
  { id: 6, text: 'vue2、vue3文档相同,开文档大部分文档仍然使用的vue2语法' },
  { id: 7, text: '自定义部分既可以使用vue3语法与可以使用vue3语法' },
]
let minList = [
  { id: 1, img: '/image/3.1我的.png', title: '用户管理', text: '系统用户管理,注册用户3000000人。' },
  { id: 2, img: '/image/对话.png', title: '站内消息', text: '您有一条新的消息,请及时处理。' },
  { id: 3, img: '/image/设置.png', title: '系统管理', text: '这里放点什么,还没想好。' },
  { id: 4, img: '/image/24gl-fileText.png', title: '还没想好', text: '这里不知道应该放点什么或者写点什么。' },
  { id: 5, img: '/image/语音.png', title: '语音导航', text: '高德地图林志玲为您语音导航。' },
  { id: 6, img: '/image/回收站.png', title: '垃圾回收', text: '删除过的数据在此处找回。。。。' },
]
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
</script>
<style scoped lang='scss'>
.first {
  background-color: #ccc;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;

  .top {
    width: 100%;
    display: flex;
    // justify-content: space-around;

    .top1 {
      width: 22%;
      // border: 1px solid white;
      height: 300px;
      background-color: white;
    }

    .top2 {

      // background-color: white;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      justify-content: center;

      .item {
        width: 32%;
        background-color: white;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        img {
          width: 35px;
        }

        &:hover {
          cursor: pointer;
          background-color: #eee;
        }
      }

    }

    .top3 {
      width: 30%;


      h3 {
        font-weight: 500;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
      }

      padding: 10px;
      width: 500px;
      border: 1px solid white;
      background-color: white;

      .item {
        font-size: 13px;
        margin-top: 2px;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px solid #ccc;

        span {
          margin-right: 5px;
        }
      }
    }
  }

  .conter {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;

    .conter1 {
      width: 22%;
      background-color: white;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          list-style: none;
          width: 50%;
          height: 112px;
          border: 1px solid #ccc;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px;
          box-sizing: border-box;

          & div:nth-of-type(2) {
            margin-top: 5px;
            font-size: 12px;
            color: #ccc;
          }

          &:hover {
            background-color: #eee;
          }

          img {
            margin-right: 5px;
            width: 30px;
            vertical-align: middle;
          }
        }
      }
    }

    .conter2 {
      flex: 1;
      margin: 0 10px;
      // border: 1px solid white;
      background-color: white;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
    }

    .conter3 {
      width: 34vw;
      background-color: white;
    }
  }

  .bottom {
    width: 100%;
    height: 50vh;
    margin-top: 10px;
    display: flex;
    justify-content: left;

    div {
      width: 50%;
      background-color: white;
      border: 1px solid #ccc;
    }
  }
}
</style>